html,
body,
div,
input,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
ol,
dl,
dt,
dd,
table,
tr,
td,
th,
tbody,
tfoot,
thead,
form,
fieldset,
legend,
button,
label,
img,
a,
b,
i,
u,
center,
blockquote,
pre,
code,
hr,
br,
#app {
  @apply m-0 p-0 box-border outline-none b-none text-base
}

.layer {
  @apply flex flex-col items-center w-full h-full bg-slate-1;
}

.center {
  @apply flex justify-center items-center;
}

.section {
  @apply flex flex-col w-full gap-3 p-3 rounded-lg bg-white;
}

.section-space {
  @apply flex-shrink-0 w-full h-3 bg-slate-200
}

.divider-x {
  @apply flex-shrink-0 w-full h-[0.05rem] bg-slate-200;
}

.form-item {
  @apply flex flex-col w-full;
}

.form-item-inline {
  @apply inline-flex items-center w-full gap-1;
}
.form-item-inline-start{
  @apply inline-flex items-start w-full gap-1;
}

.input-box {
  @apply w-full p-2 inline-flex items-center b-2 b-solid b-slate-200 rounded-md;
}
.input-box:focus-within{
  @apply b-emerald-500 bg-emerald-50/30;
}
input{
  @apply w-full
}

.desc-xs {
  @apply text-xs text-slate-400;
}

.desc {
  @apply text-slate-400;
}

.title-flag{
  @apply w-1 h-4 bg-emerald-5 rounded-lg
}

.title-sm {
  @apply text-sm font-bold
}

.title {
  @apply text-base font-bold
}

.title-lg {
  @apply text-lg font-bold
}

.title-xl {
  @apply text-xl font-bold
}

.title-2xl {
  @apply text-2xl font-bold
}

.title-4xl {
  @apply text-4xl font-bold
}

.icon-xs {
  @apply flex-shrink-0 w-2 h-2 text-xs;
}

.icon-sm {
  @apply flex-shrink-0 w-4 h-4 text-sm;
}

.icon {
  @apply flex-shrink-0 w-6 w-6 text-base;
}

.icon-lg {
  @apply flex-shrink-0 w-8 h-8 text-lg;
}

.icon-xl {
  @apply flex-shrink-0 text-xl;
}

.icon-2xl {
  @apply flex-shrink-0 text-2xl;
}

.icon-4xl {
  @apply flex-shrink-0 text-4xl;
}

.tab-button {
  @apply px-2 py-1 inline-flex items-center justify-center b-1 b-solid b-slate-300 rounded;
}

.tab-button-active {
  @apply bg-emerald-500 text-white;
}

/** 按钮样式 */
.btn-default {
  @apply p-2 inline-flex justify-center items-center gap-2 b-2 b-solid b-slate-300 rounded-md active:bg-slate-200/50;

}

.btn-primary {
  @apply p-2 inline-flex justify-center items-center gap-2 b-2 b-solid b-emerald-500 bg-emerald-500 text-white rounded-md active:bg-emerald-500/50;
}

.btn-dangre {
  @apply p-2 inline-flex justify-center items-center gap-2 b-2 b-solid b-red-500 bg-red-500 text-white rounded-md active:bg-red-500/50;
}

/** 箭头 */
.arrow-up {
  @apply flex-shrink-0 w-4 h-4 i-mdi-chevron-up text-slate-400;
}

.arrow-right {
  @apply flex-shrink-0 w-4 h-4 i-mdi-chevron-right text-slate-400;
}

.arrow-left {
  @apply flex-shrink-0 w-4 h-4 i-mdi-chevron-left text-slate-400;
}

.arrow-down {
  @apply flex-shrink-0 w-4 h-4 i-mdi-chevron-down text-slate-400;
}